<template>
  <div
    class="profit__box"
    :class="{
      'profit__box--bonus': hasAnotherProfit
    }"
  >
    <div
      class="profit" :class="{
        'profit--bonus': hasAnotherProfit,
        'profit__verticalnav': isVerticalNav
      }"
    >
      <span
        v-if="profitObj.profit" class="profit__base"
        :class="{'profit__base--opacity': hasAnotherProfit}"
      >省赚¥{{ profitObj.profit }}</span>
      <!-- 高佣 -->
      <span
        v-if="hasAnotherProfit"
        class="profit__bonus"
      >+¥{{ profitObj.anotherProfit }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    profitObj: {
      type: Object,
      default() {
        return {};
      }
    },
    isVerticalNav: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    hasAnotherProfit() {
      const { anotherProfit } = this.profitObj || {};
      return anotherProfit;
    }
  }
};
</script>


<style lang="scss" scoped>
.profit__box{
  position: absolute;
  padding: 0 8px 0 6px;
  bottom: 6px;
  min-width: 40px;
  max-width: 112px;
  overflow: hidden;
  box-sizing: border-box;

  .profit{
    font-size: 11px;
    color: #fff;
    // background: linear-gradient(155deg,rgba(255,0,141,1) 0%,rgba(255,0,34,1) 100%);
    border-radius: 9px 9px 9px 0px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

    .profit__base{
      display: inline-block;
      padding: 2px 4px;
      color: #ff1010;
      background:rgba(255,231,231, .8);
      border-radius: 9px 9px 9px 0;
    }

    .profit__base--opacity{
      font-size: 10px;
      background:rgba(255,231,231, 1);
    }

    .profit__bonus{
      // display: inline-block;
      padding: 2px 6px 2px 4px;
      font-size: 11px;
    }
  }

  .profit--bonus {
    background: linear-gradient(155deg,rgba(255,0,141,1) 0%,rgba(255,0,34,1) 100%);
  }

  .profit__verticalnav {
    display: flex;
    flex-direction: column;

    .profit__bonus{
      padding: 2px 4px;
      text-align: center;
    }
  }

}

.profit__box--bonus {
  padding: 0 8px 0 2px;
}
</style>
